<template>
  <div class="mobile">
    <div class="head-info mt-4 mb-4">
      <div :class="['head-sculpture', 'flexcc', { hide: !isViewResume }]">
        <img :src="detailInfo.headSculpture" />
      </div>
      <div class="info">
        <div class="name">{{ detailInfo.crewName }}</div>
        <div class="status flexcc">
          {{ getDictLabel('resume_work_status', detailInfo.crewStatus) }}
        </div>
      </div>
    </div>

    <div class="mt-1 flexsb">
      <div class="">
        <el-button
          v-if="!isViewResume"
          type="primary"
          @click="alertMsg"
        >
          {{ t('crew.b1_2') }}
        </el-button>
        <el-button
          @click="handleDownload"
          type="primary"
        >
          {{ t('crew.b1_3') }}
        </el-button>
        <el-button
          v-if="isViewResume"
          type="primary"
          @click="handelSendMsg"
        >
          {{ t('crew.b1_1') }}
        </el-button>
      </div>
      <div class="flexec">
        <img
          src="@/assets/img/icon_weishoucang.png"
          type="primary"
          v-if="detailInfo.isCollect == 0"
          @click="collectFn"
          class="btn-img"
        />
        <img
          src="@/assets/img/icon_yishoucang.png"
          v-if="detailInfo.isCollect > 0"
          class="btn-img"
          @click="cancelCollectFn"
        />
      </div>
    </div>

    <div class="body mt-2">
      <div class="container">
        <div class="mb-3">
          <div
            slot="header"
            class="clearfix title"
          >
            <span class="ft-2">{{ t('crew.t1') }}</span>
          </div>
          <div class="content">
            <div class="user-info">
              <el-descriptions :column="1">
                <el-descriptions-item :label="`${t('crew.u1')}`">
                  {{ detailInfo.crewLocation }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u2')}`">
                  {{ detailInfo.passportNumber }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u3')}`">
                  {{ getDictLabel('duties', detailInfo.duties) }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u4')}`">
                  {{ detailInfo.seamanBookNumber }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u5')}`">
                  {{ getDictLabel('ships_type', detailInfo.shippingType) }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u6')}`">
                  {{ detailInfo.graduateSchool }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u7')}`">
                  {{ isViewResume ? dateFormat(detailInfo.nextSignOnDate, '3') : '***' }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u8')}`">
                  {{ detailInfo.telephone }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u9')}`">
                  {{ dateFormat(detailInfo.birthDate, 3) }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u10')}`">
                  {{ detailInfo.email }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u11')}`">
                  {{ getDictLabel('english_level', detailInfo.englishLevel) }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>

        <div class="mb-3">
          <div
            slot="header"
            class="clearfix title"
          >
            <span class="ft-2">{{ t('crew.t2') }}</span>
          </div>
          <div :class="['doc-information', { hide: !isViewResume }]">
            <div>
              <img
                :src="detailInfo.seamanBook"
                alt=""
              />
              <p>{{ t('crew.c1') }}</p>
            </div>
            <div>
              <img
                :src="detailInfo.serviceBook"
                alt=""
              />
              <p>{{ t('crew.c2') }}</p>
            </div>
          </div>
        </div>
        <div class="mb-3">
          <div
            slot="header"
            class="clearfix title"
          >
            <span class="ft-2">{{ t('crew.t3') }}</span>
          </div>
          <div class="content">
            <div class="user-info">
              <el-descriptions :column="1">
                <el-descriptions-item :label="`${t('crew.l1')}`">
                  {{ getDictLabel('certificate_type', detailInfo.certificateType) }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l2')}`">
                  {{ detailInfo.certificateNumber }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l3')}`">
                  {{ dateFormat(detailInfo.periodOfValidity, 3) }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l4')}`">
                  {{ detailInfo.competentAuthority }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l5')}`">
                  {{ detailInfo.placeOfIssuance }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
        <div class="mb-3">
          <div
            slot="header"
            class="clearfix title"
          >
            <span class="ft-2">{{ t('crew.t4') }}</span>
          </div>
          <div class="content">
            <div class="user-info">
              <el-descriptions :column="1">
                <el-descriptions-item :label="`${t('crew.l6')}`">
                  {{ getDictLabel('duties', detailInfo.duties) }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l7')}`">
                  {{ getDictLabel('ships_type', detailInfo.shippingType) }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l8')}`">
                  {{ detailInfo.monthlyPay }}
                  {{ getDictLabel('currency', detailInfo.currency) }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l9')}`">
                  {{ detailInfo.servicePeriodMonth }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>

        <div class="mb-3">
          <div
            slot="header"
            class="clearfix title"
          >
            <span class="ft-2">{{ t('crew.t5') }}</span>
          </div>
          <div
            class="content"
            v-for="(item, index) in detailInfo.shcwCrewExperiences"
            :key="index"
          >
            <div class="user-info">
              <el-descriptions :column="1">
                <el-descriptions-item :label="`${t('crew.l10')}`">
                  <span> {{ dateFormat(item.startServiceTime, 3) }}-{{ dateFormat(item.endServiceTime, 3) }} </span>
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l11')}`">
                  {{ item.shipName }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l12')}`">
                  {{ item.shipFlag }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l13')}`">
                  {{ item.deadweightTon }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l14')}`">
                  {{ item.hostModel }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l15')}`">
                  {{ item.horsepower }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l16')}`">
                  {{ item.power }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l17')}`">
                  {{ item.grossTon }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l18')}`">
                  {{ getDictLabel('ships_type', detailInfo.shippingType) }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l19')}`">
                  {{ getDictLabel('duties', item.duties) }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.l20')}`">
                  {{ item.corporateName }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { getCrewResume, resumeCollect, cancelFavorite, crewResumeDownloadApi } from '@/service/crew.js'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { uploads } from '@/service/common.js'
import { dateFormat, download, openUrl } from '@/utils/index'
import useDict from '@/hooks/useDict'
import useLogin from '@/stores/login'
import useDialogue from '@/stores/dialogue'
import { getOrganization } from '@/service/organizationStructure'

import { showSuccessToast, showFailToast } from 'vant'
import 'vant/es/toast/style'

const { dictData, getDictData, getDictLabel } = useDict()

const storeDialogue = useDialogue()
const { setDialogVisible, setActivePerson } = storeDialogue

const storeLogin = useLogin()
const isViewResume = ref(false)

// 企业信息
const getOrganizationInfoFn = () => {
  if (!storeLogin?.userInfo?.enterpriseId) return
  getOrganization(storeLogin.userInfo.enterpriseId).then(({ data }) => {
    isViewResume.value = data.viewResumeFlag === '1'
  })
}

const emit = defineEmits(['update:CrewResumeVis'])
const { t, locale } = useI18n()
const router = useRouter()
const route = useRoute()
const detailInfo = ref({})
const props = defineProps({
  CrewResumeVis: {
    type: Boolean,
    default: false
  }
})
// const closeDialog = () => {
//     emit('update:CrewResumeVis', false)
// }

const alertMsg = () => {
  showFailToast(t('crew.m1'))
}

// 下载简历
const handleDownload = () => {
  if (!isViewResume.value) {
    alertMsg()
    return
  }
  crewResumeDownloadApi(route.query.id).then((res) => {
    download(res)
  })
}

// 在线联系
const handelSendMsg = () => {
  if (!isViewResume.value) {
    alertMsg()
    return
  }
  setActivePerson({
    customerName: detailInfo.value.crewName,
    customerId: detailInfo.value.createBy
  })
  openUrl('/dialogue', {a: 1})
}

// 收藏
const collectFn = () => {
  if (!isViewResume.value) {
    alertMsg()
    return
  }

  let data = {
    crewResumeId: route.query.id,
    customerId: JSON.parse(localStorage.getItem('login')).userInfo.id
  }
  resumeCollect(data).then((res) => {
    // ElMessage({
    //   message: '收藏成功',
    //   type: 'success'
    // })
    getInfo()
  })
}
// 取消收藏
const cancelCollectFn = () => {
  let data = {
    crewResumeId: route.query.id,
    customerId: JSON.parse(localStorage.getItem('login')).userInfo.id
  }
  cancelFavorite(data).then((res) => {
    // ElMessage({
    //   message: '取消成功',
    //   type: 'success'
    // })
    getInfo()
  })
}

const getInfo = () => {
  getCrewResume(route.query.id).then(({ data }) => {
    if (!isViewResume.value) {
      data.crewName = `*${data.crewName.substr(1)}`
      data.passportNumber = `***`
      data.seamanBookNumber = `***`
      data.telephone = `***`
      data.email = `***`
      data.certificateNumber = `***`
      data.monthlyPay = `***`

      data.shcwCrewExperiences.forEach((item) => {
        item.shipName = '***'
      })
    }
    detailInfo.value = data
  })
}
onMounted(async () => {
  // getCrewResume(route.query.id).then((res) => {
  //     detailInfo.value = res.data
  //     cardTable.value=[
  //         {
  //             certificateType:res.data.certificateType,
  //             certificateNumber:res.data.certificateNumber,
  //             periodOfValidity:res.data.periodOfValidity,
  //             competentAuthority:res.data.competentAuthority,
  //             placeOfIssuance:res.data.placeOfIssuance,
  //         }
  //     ]
  //     tableData.value=[
  //         {
  //             duties:res.data.duties,
  //             shippingType:res.data.shippingType,
  //             monthlyPay:res.data.monthlyPay,
  //             servicePeriodMonth:res.data.servicePeriodMonth,
  //         }
  //     ]
  // })
  await getOrganizationInfoFn()
  await getInfo()
  getDictData('resume_work_status')
  getDictData('currency')
  getDictData('duties')
  getDictData('ships_type')
  getDictData('english_level')
  getDictData('certificate_type')
})
</script>
<style scoped lang="scss">
.mobile {
  padding: 10px;
}

.el-button {
  border-radius: 0px;
}

.container {
  .doc-information {
    // display: flex;
    padding-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    div {
      img {
        width: 100%;
        height: 150px;
      }

      p {
        text-align: center;
        color: #252628;
        margin-top: 14px;
      }
    }

    &.hide {
      div {
        background: #ccc;
        height: 150px;
        img {
          display: none;
        }
        p {
          margin-top: 40%;
        }
      }
    }
  }
}

.head-info {
  width: 100%;
  display: grid;
  grid-template-columns: 50% auto;
  gap: 10px;

  .head-sculpture {
    width: 100%;
    height: 120px;
    background: #ccc;

    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    &.hide {
      img {
        display: none;
      }
      background: #ccc;
    }
  }

  .info {
    .name {
      font-size: 16px;

      font-weight: bold;
      color: #252628;
      line-height: 40px;
      margin-bottom: 20px;
      word-wrap: break-word;
      width: 100%;
    }

    .status {
      height: 30px;
      background: rgba(202, 42, 2, 0.1);
      color: #ca2a02;
      text-align: center;
      padding: 0 10px;

      p {
        span {
          font-size: 14px;
        }
      }
    }
  }
}

.btn-img {
  width: 30px;
  height: 30px;
}
.body {
  width: 100%;
  padding-bottom: 30px;

  .title {
    font-weight: bold;
    color: #ca2a02;
    border-bottom: 2px solid black;
    // line-height: 50px;
    height: 30px;
  }

  :deep(.table_header) {
    height: 50px;
    background: #f0f3f8;
    font-size: 14px;

    font-weight: bold;
    color: #252628;
    border: rgba(235, 235, 235, 1) 1px solid;
  }

  .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 40px;

    &:not(:last-of-type) {
      border-bottom: 1px dashed #000;
    }

    .user-info {
      flex: 1;
      display: flex;
      flex-direction: column;

      .name {
        width: 100%;
        display: flex;
        font-size: 14px;
        font-weight: 800;
        color: #252628;
        line-height: 22px;
        margin-bottom: 16px;

        div {
          min-width: 40px;
          height: 24px;
          background: rgba(202, 42, 2, 0.1);
          border-radius: 2px;
          margin-left: 12px;
          font-size: 12px;

          font-weight: 400;
          color: #ca2a02;
          padding: 0 8px;
        }
      }

      :deep(.el-descriptions__cell) {
        display: flex;
        justify-content: space-between;
        // padding-right: 10px;
      }

      :deep(.el-descriptions__label) {
        min-width: 80px;
        text-align: left;

        font-weight: 400;
        line-height: 48px;
        display: inline-block;
        font-size: 16px;

        font-weight: 400;
        color: #6a6973 !important;
      }

      :deep(.el-descriptions__content) {
        font-size: 16px;
        font-weight: normal;
        color: #252628;
        line-height: 48px;

        span {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
